<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-header class="header-container">
      <el-row type="flex" :gutter="5">
        <el-col :span="4">
          <span size="mini" style="font-size: 12px">Source: </span>
          <el-select
            v-model="selectedSource"
            placeholder="Select Source"
            size="mini"
            clearable
          >
            <el-option
              v-for="source in dict.type.emr_source"
              :key="source.value"
              :label="source.label"
              :value="source.value"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <span size="mini" style="font-size: 12px">Status: </span>
          <el-select
            v-model="selectedStatus"
            placeholder="Select Status"
            size="mini"
            clearable
          >
            <el-option
              v-for="status in dict.type.status"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </el-col>
        <el-col :span="12"></el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="randomStandard"
            :loading="nexting"
          >
            Next
          </el-button>
        </el-col>
        <!--保存为Case-->
        <el-col :span="2">
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-position"
            @click="openSaveCase"
            >Report Case</el-button
          >
        </el-col>
      </el-row>
    </el-header>

    <!-- 主要内容区 -->
    <el-main
      class="middle-container"
      style="margin-left: 1px; height: 75%; flex: none"
    >
      <el-row :gutter="20">
        <!-- 左侧病历文本区 -->
        <el-col :span="14">
          <el-card shadow="hover">
            <template #header>
              <div class="flex justify-between items-center">
                <h4>ID:{{ standard.id }}&nbsp;&nbsp;[{{ standard.type }}]</h4>
                <div>
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-printer"
                    @click="printRecord"
                    title="print"
                  />
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-document-copy"
                    @click="copyRecord"
                    title="copy"
                  />
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-edit"
                    @click="handleUpdate"
                    title="edit"
                  />
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-view"
                    @click="handleDetail"
                    title="detail"
                  />
                </div>
              </div>
            </template>

            <div class="record-content">
              <div class="patient-info">
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><span class="info-label" size="mini">Date:</span
                    ><span style="font-size: 15px"
                      >{{ standard.year }}-{{ standard.month }}</span
                    ></el-col
                  >
                  <el-col :span="8"
                    ><span class="info-label">Source:</span
                    ><span style="font-size: 15px">{{
                      standard.source
                    }}</span></el-col
                  >
                  <el-col :span="8"
                    ><span class="info-label">Status:</span>
                    <div
                      v-for="status in dict.type.status"
                      :key="status.value"
                      style="display: inline-block; font-size: 15px"
                    >
                      <span
                        v-if="status.value === standard.status"
                        class="status-label"
                        :style="{ backgroundColor: getColor(standard.status) }"
                      >
                        {{ status.label }}
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <div class="record-details mt-4">
                <div v-html="emrContent" style="font-size: 15px"></div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧JSON编辑区 -->
        <el-col :span="10">
          <el-card shadow="hover">
            <template #header>
              <div class="flex justify-between items-center">
                <h4>Annotated results：</h4>

                <div>
                  <el-select
                    v-model="adeService.config.llmModel"
                    placeholder="Select LLM"
                    size="mini"
                    clearable
                    style="margin-right: 10px; width: 150px"
                  >
                    <el-option
                      v-for="dict in dict.type.llm_model"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <el-select
                    v-model="adeService.config.promptType"
                    placeholder="Select Prompt"
                    size="mini"
                    clearable
                    style="margin-right: 10px; width: 100px"
                  >
                    <el-option
                      v-for="dict in dict.type.prompt_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    @click="recognizeADE"
                    :loading="recognizing"
                    >ADE Recognition</el-button
                  >
                </div>

                <div>
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-refresh"
                    @click="resetJson"
                    title="reset"
                  />
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-warning-outline"
                    @click="formatJson"
                    title="format"
                  />
                  <!--
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-check"
                    @click="validateJson"
                    title="validate"
                  />
                  -->
                </div>
              </div>
            </template>

            <div class="json-editor-container">
              <el-input
                type="textarea"
                v-model="jsonText"
                :rows="17"
                style="font-size: 14px"
                placeholder="Pls input json data(ades)"
                @input="onJsonChange"
              />

              <div class="json-status mt-2">
                <el-tag
                  :type="jsonValid ? 'success' : 'danger'"
                  effect="plain"
                  size="mini"
                >
                  {{ jsonStatusText }}
                </el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部操作区 -->
    <el-footer class="footer-container">
      <el-row type="flex" justify="end">
        <el-button
          type="warning"
          class="ml-3"
          @click="saveRecordNotSure"
          :loading="saving"
        >
          Not Sure
        </el-button>
        <el-button
          type="primary"
          class="ml-3"
          @click="saveRecordUnChecked"
          :loading="saving"
        >
          UnChecked
        </el-button>
        <el-button
          type="success"
          class="ml-3"
          @click="saveRecordChecked"
          :loading="saving"
        >
          Checked
        </el-button>
      </el-row>
    </el-footer>

    <!-- 添加或修改标准数据集对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="80%"
      append-to-body
      style="margin-bottom: 5px"
    >
      <el-form ref="form">
        <el-form-item label="Content" prop="content">
          <el-input
            v-model="standard.content"
            :rows="14"
            type="textarea"
            placeholder=""
            style="font-size: 15px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">OK</el-button>
        <el-button @click="cancel">Cancel</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改Ade Cases对话框 -->
    <el-dialog :title="title" :visible.sync="openCase" width="80%" append-to-body>
      <el-form ref="caseform" :model="caseForm" :rules="rules">
        <el-form-item label="Content" prop="content">
          <el-input
            v-model="caseForm.content"
            type="textarea"
            rows="5"
            placeholder="Pls input content"
          />
        </el-form-item>
        <el-form-item label="Ades" prop="ades">
          <el-input
            v-model="caseForm.ades"
            type="textarea"
            rows="5"
            placeholder="Pls input ades(json format)"
          />
        </el-form-item>
        <el-form-item label="LLM" prop="llm">
          <el-select v-model="caseForm.llm" placeholder="Select LLM">
            <el-option
              v-for="dict in dict.type.llm_model"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="PromptType" prop="promptType">
          <el-select
            v-model="caseForm.promptType"
            placeholder="Select PromptType"
          >
            <el-option
              v-for="dict in dict.type.prompt_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Case Type" prop="type">
          <el-select v-model="caseForm.type" placeholder="Select Case Type">
            <el-option
              v-for="dict in dict.type.ade_case_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Description" prop="description">
          <el-input
            v-model="caseForm.description"
            type="textarea"
            rows="5"
            placeholder="Pls input description"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCaseForm">Confirm</el-button>
        <el-button @click="cancelCaseForm">Cancel</el-button>
      </div>
    </el-dialog>

    <!--标准数据集详情对话框-->
    <el-dialog
      title="Detail"
      :visible.sync="openDetail"
      width="90%"
      append-to-body
      style="margin-bottom: 5px"
    >
      <el-row :gutter="10">
        <el-col :span="7">
          <span size="mini" style="font-size: 12px; font-weight: bold"
            >Year:
          </span>
          {{ standard.year }}
        </el-col>
        <el-col :span="7">
          <span size="mini" style="font-size: 12px; font-weight: bold"
            >Month:
          </span>
          {{ standard.month }}
        </el-col>
        <el-col :span="10">
          <span size="mini" style="font-size: 12px; font-weight: bold"
            >Source:
          </span>
          {{ standard.source }}
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <span size="mini" style="font-size: 12px; font-weight: bold"
            >Content:
          </span>
          <p v-html="emrContent" class="filed-content"></p>
          
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <span size="mini" style="font-size: 12px; font-weight: bold"
            >Ades:
          </span>
          <p class="filed-content" style="color:#008800">
            {{ formJson(standard.ades) }}
          </p>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span size="mini" class="field-label">NAG_Enire: </span>
          <p class="filed-content">{{ formJson(standard.nagAdesEnire) }}</p>
        </el-col>
        <el-col :span="6">
          <span size="mini" class="field-label">NAG_Deepseek: </span>
          <p class="filed-content">{{ formJson(standard.nagAdesDeepseek) }}</p>
        </el-col>
        <el-col :span="6">
          <span size="mini" class="field-label">NAG_Gpt: </span>
          <p class="filed-content">{{ formJson(standard.nagAdesGpt) }}</p>
        </el-col>
        <el-col :span="6">
          <span size="mini" class="field-label">NAG_Qwen: </span>
          <p class="filed-content"> {{ formJson(standard.nagAdesQwen) }}</p>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span size="mini" class="field-label">SAG_Enire: </span>
          <p class="filed-content">{{ formJson(standard.adesEnire) }}</p>
        </el-col>

        <el-col :span="6">
          <span size="mini" class="field-label">SAG_Deepseek: </span>
          <p class="filed-content">{{ formJson(standard.adesDeepseek) }}</p>
        </el-col>

        <el-col :span="6">
          <span size="mini" class="field-label">SAG_Gpt: </span>
          <p class="filed-content">{{ formJson(standard.adesGpt) }}</p>
        </el-col>

        <el-col :span="6">
          <span size="mini" class="field-label">SAG_Qwen: </span>
          <p class="filed-content">{{ formJson(standard.adesQwen) }}</p>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span size="mini" class="field-label">RAG_Enire: </span>
          <p class="filed-content">{{ formJson(standard.ragAdesEnire) }}</p>
        </el-col>
        <el-col :span="6">
          <span size="mini" class="field-label">RAG_Deepseek: </span>
          <p class="filed-content">{{ formJson(standard.ragAdesDeepseek) }}</p>
        </el-col>
        <el-col :span="6">
          <span size="mini" class="field-label">RAG_Gpt: </span>
          <p class="filed-content">{{ formJson(standard.ragAdesGpt) }}</p>
        </el-col>
        <el-col :span="6">
          <span size="mini" class="field-label">RAG_Qwen: </span>
          <p class="filed-content">{{ formJson(standard.ragAdesQwen) }}</p>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDetail">Close</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { recognize } from "@/api/ade/adeRecognition";
import { addCase } from "@/api/ade/case";
import {
  randomStandard,
  updateStandard,
  getStandard,
} from "@/api/ade/standard";

export default {
  name: "MedicalRecordEditor",
  dicts: ["emr_source", "status", "llm_model", "prompt_type", "ade_case_type"],
  data() {
    return {
      // 表单数据
      selectedSource: "标准1000",
      selectedStatus: "0", //non-checked

      //ade服务相关数据
      adeService: {
        emr: "",
        config: {
          llmModel: "ernie-3.5-8k",
          promptType: "SAG",
        },
      },

      // 病历数据
      standard: {
        id: "",
        year: "",
        month: "",
        source: "",
        status: "",
        type: "",
        content: "",
        ades: "", // JSON格式的ADEs数据
      },
      //emr内容
      emrContent: "", //带有标签的EMR内容

      //ADE Case 表单
      caseForm: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否显示标准数据集详情对话框
      openDetail: false,
      //是否显示ade case 对话框
      openCase: false,
      // 表单校验
      rules: {
        content: [
          {
            required: true,
            message: "Content can not be empty!",
            trigger: "blur",
          },
        ],
        ades: [
          {
            required: true,
            message: "Ades can not be empty!",
            trigger: "blur",
          },
        ],
        llm: [
          {
            required: true,
            message: "LLM can not be empty!",
            trigger: "change",
          },
        ],
        promptType: [
          {
            required: true,
            message: "PromptType can not be empty!",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "Case Type can not be empty!",
            trigger: "change",
          },
        ],
        description: [
          {
            required: true,
            message: "Description can not be empty!",
            trigger: "blur",
          },
        ],
      },

      // JSON数据
      jsonText: "",
      jsonValid: true,
      jsonStatusText: "JSON Format Correct",

      // 状态
      loading: false,
      nexting: false,
      saving: false,
      recognizing: false,
    };
  },
  computed: {},
  created() {
    // 初始化JSON文本
    // this.resetJson();
    this.randomStandard();
  },
  methods: {
    formJson(value) {
      if (value != null && value != undefined && value != "") {
        try {
          const parsed = JSON.parse(value);
          return JSON.stringify(parsed, null, 2);
        } catch (error) {
          return "[]";
        }
      }
      return "[]";
    },
    //==========================================================ADE识别相关操作========================================================

    recognizeADE() {
      this.recognizing = true;
      this.adeService.emr = this.standard.content; //获取当前要分析的病程记录
      recognize(this.adeService)
        .then((response) => {
          this.jsonText = JSON.stringify(response.data.ades, null, 2);
          this.validateJson(); // 验证JSON格式

          // 格式化EMR内容，突出显示识别出的ADE
          let rep = "";
          this.emrContent = this.standard.content; // 初始化格式化的EMR内容
          for (let i = 0; i < response.data.ades.length; i++) {
            rep = response.data.ades[i].sentence; // 将其他ADE名称用 | 分隔
            this.emrContent = this.emrContent.replaceAll(
              rep,
              '<font color="red">' + rep + "</font>"
            );
          }
          this.recognizing = false;
        })
        .catch((error) => {
          console.error("Error recognizing ADE:", error);
          this.$message.error("Failed to recognize ADE");
          this.recognizing = false;
          this.jsonText = "";
        });
    },

    //==========================================================编辑病例内容========================================================
    cancel() {
      this.open = false;
      this.title = "";
    },
    submitForm() {
      //更新EMR内容
      var data = {
        id: this.standard.id,
        content: this.standard.content,
      };
      updateStandard(data)
        .then((response) => {
          this.$modal.msgSuccess("Edit Successfully");
          this.open = false;
          this.getCurrentStandard();
        })
        .catch((error) => {
          this.$modal.msgError(`Fail: ${error.message}`);
        });
    },
    /** 修改按钮操作 */
    handleUpdate() {
      getStandard(this.standard.id).then((response) => {
        this.standard = response.data;
        this.open = true;
        this.title = "Edit";
      });
    },
    /** 查看详情 */
    handleDetail() {
      getStandard(this.standard.id).then((response) => {
        this.standard = response.data;
        this.openDetail = true;
      });
    },
    closeDetail() {
      this.openDetail = false;
    },

    getColor(value) {
      switch (value) {
        case "0":
          return "red";
        case "1":
          return "green";
        case "2":
          return "gray";
        default:
          return "yellow"; // 默认颜色
      }
    },
    getCurrentStandard() {
      this.nexting = true;
      getStandard(this.standard.id)
        .then((response) => {
          if (response.data == null || response.data == undefined) {
            this.$message.warning(
              "No aviliable emr data, please change the source or status!"
            );
            this.nexting = false;
            return;
          }
          this.standard = response.data;
          let rep = "";
          this.emrContent = this.standard.content; // 初始化格式化的EMR内容
          if (this.standard.ades.length > 2) {
            const parsed = JSON.parse(this.standard.ades);
            for (let i = 0; i < parsed.length; i++) {
              rep = parsed[i].sentence; // 将其他ADE名称用 | 分隔
              this.emrContent = this.emrContent.replaceAll(
                rep,
                '<font color="red">' + rep + "</font>"
              );
            }
          }

          this.jsonText = this.standard.ades;
          this.formatJson();
          this.nexting = false;
        })
        .catch((error) => {
          this.$message.error(`Fail: ${error.message}`);
          this.nexting = false;
        });
    },
    // 随机病历
    randomStandard() {
      this.nexting = true;
      var data = { status: this.selectedStatus, source: this.selectedSource };
      randomStandard(data)
        .then((response) => {
          if (response.data == null || response.data == undefined) {
            this.$message.warning(
              "No aviliable emr data, please change the source or status!"
            );
            this.nexting = false;
            return;
          }
          this.standard = response.data;
          let rep = "";
          this.emrContent = this.standard.content; // 初始化格式化的EMR内容
          if (this.standard.ades.length > 2) {
            const parsed = JSON.parse(this.standard.ades);
            for (let i = 0; i < parsed.length; i++) {
              rep = parsed[i].sentence; // 将其他ADE名称用 | 分隔
              this.emrContent = this.emrContent.replaceAll(
                rep,
                '<font color="red">' + rep + "</font>"
              );
            }
          }

          this.jsonText = this.standard.ades;
          this.formatJson();
          this.nexting = false;
        })
        .catch((error) => {
          // this.$message.error("Too fast, please wait a moment!");
          this.nexting = false;
        });
    },

    //=====================================================JSON编辑器相关操作========================================================
    // 重置JSON数据  还原JSON数据
    resetJson() {
      //拿到原始的JSON字符串
      this.jsonText = this.standard.ades;
      try {
        //解析成JSON对象
        const parsed = JSON.parse(this.jsonText);
        this.emrContent = this.standard.content; // 初始化格式化的EMR内容    将emrContent中识别到的sentence打上标签 便于展示
        let rep = "";
        for (let i = 0; i < parsed.length; i++) {
          rep = parsed[i].sentence; // 将其他ADE名称用 | 分隔
          this.emrContent = this.emrContent.replaceAll(
            rep,
            '<font color="red">' + rep + "</font>"
          );
        }
        // 格式化json内让你
        this.jsonText = JSON.stringify(parsed, null, 2);
      } catch (error) {
        this.jsonValid = false;
        this.jsonStatusText = `Wrong Format: ${error.message}`;
        this.$message.error("JSON Format Wrong，Can not be formatted!");
      }
    },
    // 格式化JSON
    formatJson() {
      try {
        const parsed = JSON.parse(this.jsonText);
        this.emrContent = this.standard.content; // 初始化格式化的EMR内容
        let rep = "";
        for (let i = 0; i < parsed.length; i++) {
          rep = parsed[i].sentence; // 将其他ADE名称用 | 分隔
          this.emrContent = this.emrContent.replaceAll(
            rep,
            '<font color="red">' + rep + "</font>"
          );
        }
        this.jsonText = JSON.stringify(parsed, null, 2);
        this.jsonValid = true;
        this.jsonStatusText = "JSON Format Correct!";
      } catch (error) {
        this.jsonValid = false;
        this.jsonStatusText = `Wrong Format: ${error.message}`;
        this.$message.error("JSON Format Wrong，Can not be formatted!");
      }
    },
    // 验证JSON
    validateJson() {
      try {
        const parsed = JSON.parse(this.jsonText);
        for (let i = 0; i < parsed.length; i++) {
          let json = parsed[i]; // 将其他ADE名称用 | 分隔
          if (
            json.drugs == null ||
            json.drugs == undefined ||
            json.reactions == null ||
            json.reactions == undefined ||
            json.sentence == null ||
            json.sentence == undefined
          ) {
            this.jsonValid = false;
            this.jsonStatusText = `Wrong structure, corret is : [{"drugs":[],"reactions":[], "sentence":""}]}`;
            return;
          }
        }
        this.jsonValid = true;
        this.jsonStatusText = "JSON Foramat Correct";
        // this.$message.success('JSON格式验证通过');
      } catch (error) {
        this.jsonValid = false;
        this.jsonStatusText = `Wrong format: ${error.message}`;
        this.$message.error("Wrong Json Format");
      }
    },

    // JSON内容变化时自动验证
    onJsonChange() {
      try {
        const parsed = JSON.parse(this.jsonText);
        for (let i = 0; i < parsed.length; i++) {
          let json = parsed[i]; // 将其他ADE名称用 | 分隔
          if (
            json.drugs == null ||
            json.drugs == undefined ||
            json.reactions == null ||
            json.reactions == undefined ||
            json.sentence == null ||
            json.sentence == undefined
          ) {
            this.jsonValid = false;
            this.jsonStatusText = `Wrong structure, corret is : [{"drugs":[],"reactions":[], "sentence":""}]}`;
            return;
          }
        }
        this.jsonValid = true;
        this.jsonStatusText = "JSON Foramat Correct";
      } catch (error) {
        this.jsonValid = false;
        this.$message.error("Wrong Json Format");
      }
    },

    //=====================================================ADE 语料审核处理========================================================
    //标记不确定的病历
    saveRecordNotSure() {
      this.validateJson();
      if (!this.jsonValid) {
        this.$message.error("JSON Format Wrong, please fix it first!");
        return;
      }

      this.saving = true;
      var data = {
        id: this.standard.id,
        status: "2",
        ades: this.jsonText,
      };
      updateStandard(data)
        .then((response) => {
          this.saving = false;
          this.$message.success("Successfully marked as Not Sure");
          this.getCurrentStandard();
        })
        .catch((error) => {
          this.saving = false;
          this.$message.error(`Fail: ${error.message}`);
        });
    },
    //标记已经检查的病历
    saveRecordChecked() {
      this.validateJson();
      if (!this.jsonValid) {
        this.$message.error("JSON Format Wrong, please fix it first!");
        return;
      }
      this.saving = true;
      var data = {
        id: this.standard.id,
        status: "1",
        ades: this.jsonText,
      };
      updateStandard(data)
        .then((response) => {
          this.saving = false;
          this.$message.success("Successfully marked as Checked");
          this.getCurrentStandard();
        })
        .catch((error) => {
          this.saving = false;
          this.$message.error(`Fail: ${error.message}`);
        });
    },
    //标记未检查的病历
    saveRecordUnChecked() {
      this.validateJson();
      if (!this.jsonValid) {
        this.$message.error("JSON Format Wrong, please fix it first!");
        return;
      }
      this.saving = true;
      var data = {
        id: this.standard.id,
        status: "0",
        ades: this.jsonText,
      };
      updateStandard(data)
        .then((response) => {
          this.saving = false;
          this.$message.success("Successfully marked as UnChecked");
          this.getCurrentStandard();
        })
        .catch((error) => {
          this.saving = false;
          this.$message.error(`Fail: ${error.message}`);
        });
    },
    // 打印病历
    printRecord() {
      window.print();
    },

    // 复制病历
    copyRecord() {
      const textToCopy = this.standard.content;

      navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          this.$message.success("Copy successful!");
        })
        .catch((err) => {
          this.$message.error("Copy failed: " + err);
          console.error("Copy failed:", err);
        });
    },

    //=============================================新增案例=========================
    // 取消按钮
    cancelCaseForm() {
      this.openCase = false;
      this.title = "";
      this.caseForm = {};
      this.resetForm("caseform");
    },
    //打开保存case对话框
    openSaveCase() {
      this.cancel();
      this.title = "Save Case";
      this.caseForm.content = this.standard.content;
      this.caseForm.ades = this.jsonText;
      this.caseForm.llm = this.adeService.config.llmModel;
      this.caseForm.promptType = this.adeService.config.promptType;
      this.caseForm.source = "Standard Corpus";
      this.openCase = true;
    },
    /** 提交按钮 */
    submitCaseForm() {
      this.$refs["caseform"].validate((valid) => {
        if (valid) {
          addCase(this.caseForm).then((response) => {
            this.$modal.msgSuccess("Report Case Successfully!");
            this.openCase = false;
          });
        }
      });
    },
  },
};
</script>

<style>
/* 全局样式 */
.app-container {
  display: flex;
  flex-direction: column;
}

.header-container {
  height: 35px !important;
  padding: 0 10px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.middle-container {
  padding: 10px;
}

.footer-container {
  height: 70px !important;
  padding: 0 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 病历内容样式 */
.record-content {
  padding: 10px;
}

.patient-info {
  margin-bottom: 10px;
}

.info-label {
  font-weight: 500;
  font-size: 14px;
  color: #606266;
  margin-right: 5px;
}

/* JSON编辑器样式 */
.json-editor-container {
  position: relative;
}

.json-status {
  text-align: right;
}

/* 自定义Element组件样式 */
.el-card__header {
  font-weight: 500;
  color: #303133;
}

.el-descriptions-item__label {
  background-color: #f5f7fa;
}

.status-label {
  color: white;
  /* 文字颜色 */
  padding: 1px 1px;
  border-radius: 2px;
  display: inline-block;
  margin: 1px;
}

p.filed-content {
  line-height: 1.6; /* 舒适的行高 */
  color: #333; /* 深灰色文字，比纯黑更柔和 */
  margin: 0 0 1.2em 0; /* 底部外边距 */
  padding: 0.5rem 0.5rem; /* 内边距 */
  background: linear-gradient(
    135deg,
    #f8f9fa 0%,
    #e9ecef 100%
  ); /* 柔和渐变背景 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 细微阴影 */
  border-left: 4px solid #6c757d; /* 左侧装饰性边框（可改主题色） */
  transition: all 0.3s ease; /* 悬停动画 */
  flex-grow: 1; /* 允许内容段落扩展 */
  white-space: pre-wrap; /* 保留空白和换行 */
  font-family: monospace; /* 使用等宽字体 */
  font-size: 12px;
}

/* 悬停效果（可选） */
p:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

span.field-label {
  font-size: 12px;
  font-weight: bold;
}
</style>